﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1 id="transportName">Unknown Transport</h1>

    <h2>Controls</h2>
    <div>
        <button id="connectButton" type="button">Connect</button>
        <button id="disconnectButton" type="button" disabled>Disconnect</button>
        <button id="clearButton" type="button">Clear</button>
    </div>

    <div>
        <button id="observableButton" name="observable" type="button" disabled>From Observable</button>
        <button id="channelButton" name="channel" type="button" disabled>From Channel</button>
    </div>

    <h2>Results</h2>
    <ul id="resultsList"></ul>

    <ul id="messages"></ul>
    <script type="text/javascript">
        if (typeof Promise === 'undefined')
        {
            document.write(
                '<script type="text/javascript" src="lib/signalr-client/signalr-clientES5.js"><\/script>' +
                '<script type="text/javascript" src="lib/signalr-client/signalr-msgpackprotocolES5.js"><\/script>');
        }
        else
        {
            document.write(
                '<script type="text/javascript" src="lib/signalr-client/signalr-client.js"><\/script>' +
                '<script type="text/javascript" src="lib/signalr-client/signalr-msgpackprotocol.js"><\/script>');
        }
    </script>
    <script src="utils.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let resultsList = document.getElementById('resultsList');
            let channelButton = document.getElementById('channelButton');
            let observableButton = document.getElementById('observableButton');
            let clearButton = document.getElementById('clearButton');

            let connectButton = document.getElementById('connectButton');
            let disconnectButton = document.getElementById('disconnectButton');

            let logger = new signalR.ConsoleLogger(signalR.LogLevel.Information);
            let transportType = signalR.TransportType[getParameterByName('transport')] || signalR.TransportType.WebSockets;

            let invocationCounter = 0;

            document.getElementById('transportName').innerHTML = signalR.TransportType[transportType];
            let connection = null;

            click('clearButton', function () {
                resultsList.innerHTML = '';
            });

            click('disconnectButton', function () {
                connection.stop();
            });

            click('connectButton', function () {
                connection = new signalR.HubConnection('/streaming', { transport: transportType, logger: logger });

                connection.onclose(function () {
                    channelButton.disabled = true;
                    observableButton.disabled = true;
                    connectButton.disabled = false;
                    disconnectButton.disabled = true;

                    addLine('resultsList', 'disconnected', 'green');
                });

                connection.start()
                    .then(function () {
                        channelButton.disabled = false;
                        observableButton.disabled = false;
                        connectButton.disabled = true;
                        disconnectButton.disabled = false;
                        addLine('resultsList', 'connected', 'green');
                    });
            });

            click('observableButton', function () {
                run('ObservableCounter')
            });

            click('channelButton', function () {
                run('ChannelCounter')
            });

            function run(method) {
                let id = invocationCounter;
                invocationCounter += 1;
                addLine('resultsList', 'running ' + method + '(' + id + ') ...');
                connection.stream(method, 10, (Math.random() * 5) * 200).subscribe({
                    closed: false,
                    next: function (item) {
                        addLine('resultsList', method + '(' + id + '): ' + item);
                    },
                    error: function (err) {
                        addLine('resultsList', method + '(' + id + '):' + err, 'red');
                    },
                    complete: function () {
                        addLine('resultsList', method + '(' +  id + '): complete', 'green');
                    }
                });
            }
        });
    </script>
</body>
</html>
